import  React from 'react'

import  ReactDOM from 'react-dom'

import App from './App'

// ReactDOM.render('第一个参数jsx或组件名字','第二个是挂载的dom元素选择器')

// 引入 redux  

import  {createStore} from 'redux'


// currentState=0  先给一个初始值
function reducer(currentState=0,action) {
  console.log('action',action);

  console.log("currentState",currentState)

  switch (action.type) {
    case "ADD":
    // let  newSate=currentState+1
    // alert('add')
       return   currentState+1;
      
    default:
    // let  newSate=currentState
    return  currentState   // 是新的state  只是结果跟之前是一样    
  }

}

// const  store=createStore('纯函数 reducer')
const  store=createStore(reducer)

//监听 state 变化 一旦state变化就会触发这个函数的执行
// store.subscribe(()=>{
//   console.log('newState',  store.getState())
// })

// console.log(store)


//想办法重新是渲染 App 这个组件 


function  myRender() {


  ReactDOM.render(


    <App
    msg="张三"
     count={store.getState()}
     myAdd={()=>store.dispatch({type:'ADD'})} 
    
    
    />,
    document.getElementById('root')
  )
}

// 一上来需要手动调用一次  目的 渲染 App 组件
myRender()  


// 后续 如果一旦 state 发生 了变化 应该重新获取到新的state的值 传递给App 组件  也就是说重新去渲染App组件



//监听 state 变化 一旦state变化就会触发这个函数的执行
// store.subscribe(()=>{
//   myRender()
// })



 //简化版 
store.subscribe(myRender)

